<template>
  <div id="BarDevicenet"></div>
</template>

<script>
import * as echarts from "echarts/core";
import {
  TooltipComponent,
  GridComponent,
  LegendComponent
} from "echarts/components";
import { BarChart } from "echarts/charts";
import { CanvasRenderer } from "echarts/renderers";
const axios = require("axios");

import { TOKEN_PROD, TOKEN_DEV, VUE_BASE_API } from "@/utils/publicdata";
export default {
  name: "BarDevicenet",
  data() {
    return {
      myChart: null,
      // 数据
      devicenet: [
        {
          a: "中煤",
          b: 0,
          c: 0
        },
        {
          a: "双杰",
          b: 0,
          c: 0
        },
        {
          a: "昌吉",
          b: 0,
          c: 0
        },
        {
          a: "国电投",
          b: 0,
          c: 0
        },
        {
          a: "华电",
          b: 0,
          c: 0
        },
        {
          a: "立新",
          b: 0,
          c: 0
        },
        {
          a: "锦鸿电力",
          b: 0,
          c: 0
        }
      ],
      // 在线设备
      online: [],
      // 离线设备
      offline: [],
      // 名称
      bartitle: []
    };
  },
  created() {
    echarts.use([
      TooltipComponent,
      GridComponent,
      LegendComponent,
      BarChart,
      CanvasRenderer
    ]);
  },
  created() {},
  mounted() {
    this.getlistdata();
  },
  methods: {
    // 查询数据
    getlistdata() {
      console.log("123456");
      // 定义请求的URL
      const url = `${VUE_BASE_API}/xmgl/mlConfig/list`;

      // console.log("TOKEN_PROD", TOKEN_PROD);

      // 定义请求头
      const headers = {
        Authorization: TOKEN_PROD,
        "Content-Type": "application/json"
      };
      axios
        .post(url, {}, { headers })
        .then(response => {
          // 从响应中提取total的值
          // console.log("查询数据", response.data);
          // console.log("查询数据", response.data.code);
          if (response.data.code == "200") {
            console.log("=====");
            let item = JSON.parse(response.data.result[0].value9);

            item.forEach(item => {
              if (item.name == "中煤木垒") {
                this.devicenet[0].c = item.fenji;
                this.devicenet[0].b = item.shexain;
              }

              if (item.name == "新疆华电") {
                this.devicenet[4].c = item.fenji;
                this.devicenet[4].b = item.shexain;
              }

              if (item.name == "锦鸿电力") {
                this.devicenet[6].c = item.fenji;
                this.devicenet[6].b = item.shexain;
              }

              if (item.name == "新疆立新") {
                this.devicenet[5].c = item.fenji;
                this.devicenet[5].b = item.shexain;
              }

              if (item.name == "昌吉国投") {
                this.devicenet[2].c = item.fenji;
                this.devicenet[2].b = item.shexain;
              }

              if (item.name == "国家电投") {
                this.devicenet[3].c = item.fenji;
                this.devicenet[3].b = item.shexain;
              }

              if (item.name == "新疆双杰") {
                this.devicenet[1].c = item.fenji;
                this.devicenet[1].b = item.shexain;
              }

              this.mapconfig();
            });
          }
        })
        .catch(error => {
          console.error("Error:", error.message);
        });
    },
    // 数组对象排序
    // 升序计算
    compareValues(key, order = "asc") {
      return function innerSort(a, b) {
        if (!a.hasOwnProperty(key) || !b.hasOwnProperty(key)) {
          // 该属性在任何一个对象上都不存在
          return 0;
        }

        const varA = typeof a[key] === "string" ? a[key].toUpperCase() : a[key];
        const varB = typeof b[key] === "string" ? b[key].toUpperCase() : b[key];

        let comparison = 0;
        if (varA > varB) {
          comparison = 1;
        } else if (varA < varB) {
          comparison = -1;
        }
        return order === "desc" ? comparison * -1 : comparison;
      };
    },

    // 配置
    mapconfig() {
      // 数组对象排序
      // this.devicenet.sort(this.compareValues('b'))
      this.devicenet.sort((a, b) => {
        return a.b - b.a;
      });
      // console.log("this.devicenet", this.devicenet);
      // 名称
      this.bartitle = this.devicenet.map(v => v.a);
      // 在线设备
      this.online = this.devicenet.map(v => Number(v.b));
      // 离线设备
      this.offline = this.devicenet.map(v => Number(v.c));
      // 找到这个容器
      this.myChart = echarts.init(this.$el);
      const that = this;
      // 配置项
      let option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // Use axis to trigger tooltip
            type: "shadow" // 'shadow' as default; can also be 'line' or 'shadow'
          }
        },
        // 工具箱-下载
        toolbox: {
          // feature: {
          //   saveAsImage: {}
          // }
        },
        legend: {
          top: "5%",
          right: "10%",
          // 纵向布局
          // orient: 'horizontal',
          textStyle: {
            color: "#ffffff",
            fontSize: 11
          },
          // top:
          // right:
          formatter: function(parame) {
            // console.log("parame", parame);
            // console.log("parame", parame == "在线设备");
            if (parame == "已装摄像头") {
              let a = that.online.reduce((total, obj) => {
                return total + obj;
              }, 0);
              console.log("a", a);
              return parame + "(" + a + "台)";
            } else {
              let a = that.offline.reduce((total, obj) => {
                return total + obj;
              }, 0);
              return parame + "(" + a + "台)";
            }
          }
        },
        // 整个图标位置调节
        grid: {
          left: "0",
          right: "4%",
          bottom: "0",
          // 在父元素内等比缩放
          containLabel: true
        },
        xAxis: {
          type: "value",
          axisLine: {
            show: true, // 显示轴线
            lineStyle: {
              color: "#26CEEE" // 将轴线颜色改为白色
            }
          },
          splitLine: {
            show: true, // 显示所有分割线
            lineStyle: {
              color: "#0d4b81" // 将分割线颜色改为红色
            }
          },
          min: 0, // 设置最小值
          max: 100, // 设置最大值
          interval: 50 // 设置刻度间隔
        },
        yAxis: {
          type: "category",
          data: this.bartitle,
          axisLine: {
            lineStyle: {
              color: "#26CEEE" // 轴线颜色
            }
          },
          axisTick: {
            lineStyle: {
              color: "#26CEEE" // 刻度线颜色
            }
          },
          axisLabel: {
            color: "#2ff1ff" // 标签颜色
          }
        },
        series: [
          {
            name: "已装摄像头",
            type: "bar",
            stack: "total",
            label: {
              show: false
            },
            barWidth: "40%", // 设置柱子的宽度为40%
            itemStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 1,
                y2: 0,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(175, 99, 216, 0.4)" // 起始位置透明度为0.5
                  },
                  {
                    offset: 1,
                    color: "rgba(175, 99, 216, 1)" // 结束位置透明度为1
                  }
                ]
              },
              barBorderRadius: [0, 10, 10, 0] // 设置圆角，左上和右上为10px
            },
            // 数据静态展示时候-是否需要隐藏其他数据
            emphasis: {
              // focus: 'series'
            },
            data: this.online
          },
          {
            name: "已安装风机",
            type: "bar",
            stack: "total",
            label: {
              width: "15px",
              show: true,
              position: "right",
              // color: '#fff'
              formatter: function(params) {
                // console.log("params", params);
                // console.log("params.dataIndex", params.dataIndex);
                var index = params.dataIndex;
                // console.log("this.online", that.online);
                // console.log("index", index);
                // return that.online[index] + "/" + that.offline[index];

                var text = `{titleone|${that.online[index]}} {titlethere|/} {titletwo|${that.offline[index]}}`;
                return text;
              },
              rich: {
                titleone: {
                  color: "#fff"
                },
                titletwo: {
                  color: "#fff"
                },
                titlethere: {
                  color: "#fff"
                }
              }
            },
            barWidth: "40%", // 设置柱子的宽度为40%
            itemStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 1,
                y2: 0,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(42, 251, 209, 0.4)" // 起始位置透明度为0.5
                  },
                  {
                    offset: 1,
                    color: "rgba(42, 251, 209, 1)" // 结束位置透明度为1
                  }
                ]
              },
              barBorderRadius: [0, 10, 10, 0] // 设置圆角，左上和右上为10px
            },
            // 数据静态展示时候-是否需要隐藏其他数据
            emphasis: {
              // focus: 'series'
            },
            data: this.offline
          }
        ]
      };
      // 渲染数据
      this.myChart.setOption(option);
    }
  }
};
</script>
<style lang="scss" scoped>
#BarDevicenet {
  width: 100%;
  height: 100%;
}
</style>
